<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <style>
        body {
            padding-top: 70px;
            padding-bottom: 30px;
        }
    </style>

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">在线书城</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav nav">
                <li class="active"><a href="#">主页</a></li>
                <li><a href="#">科幻</a></li>
                <li><a href="#">悬疑</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        更多<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">儿童</a></li>
                        <li><a href="#">言情</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">武侠</a></li>

                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <p>
        <button type="button" class="btn btn-lg btn-default">default</button>
        <button type="button" class="btn btn-lg btn-primary">primary</button>
        <button type="button" class="btn btn-lg btn-success">success</button>
        <button type="button" class="btn btn-lg btn-info">info</button>
        <button type="button" class="btn btn-lg btn-warning">warning</button>
        <button type="button" class="btn btn-lg btn-danger">danger</button>
        <button type="button" class="btn btn-lg btn-link">link</button>

    </p>
    <div class="row">
        <div class="col-md-6">
            <table class="table">
                <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>18</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <table class="table table-striped">
                <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>18</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <h1>
        <span class="label label-default">default</span>
        <span class="label label-success">success</span>
        <span class="label label-primary">primary</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </h1>
    <h2>
        <span class="label label-default">default</span>
        <span class="label label-success">success</span>
        <span class="label label-primary">primary</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </h2>
    <h3>
        <span class="label label-default">default</span>
        <span class="label label-success">success</span>
        <span class="label label-primary">primary</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </h3>
    <h4>
        <span class="label label-default">default</span>
        <span class="label label-success">success</span>
        <span class="label label-primary">primary</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </h4>
    <h5>
        <span class="label label-default">default</span>
        <span class="label label-success">success</span>
        <span class="label label-primary">primary</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </h5>
    <h6>
        <span class="label label-default">default</span>
        <span class="label label-success">success</span>
        <span class="label label-primary">primary</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </h6>
    <p>
        <span class="label label-default">default</span>
        <span class="label label-success">success</span>
        <span class="label label-primary">primary</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </p>

    <div class="alert alert-success">弹窗成功弹出！</div>
    <div class="alert alert-info">弹窗成功弹出！</div>
    <div class="alert alert-warning">弹窗成功弹出！</div>
    <div class="alert alert-danger">弹窗成功弹出！</div>
    <button class="btn btn-primary btn-lg">点击显示弹窗</button>

    <div class="progress">
        <div class="progress-bar" style="width: 60%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 10%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style="width: 10%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width: 30%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 30%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style="width: 10%"></div>
        <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
        <div class="progress-bar progress-bar-striped" style="width: 30%"></div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">便签标题</h3>
                </div>
                <div class="panel-body">
                    便签主体
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">便签标题</h3>
                </div>
                <div class="panel-body">
                    便签主体
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">便签标题</h3>
                </div>
                <div class="panel-body">
                    便签主体
                </div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">便签标题</h3>
                </div>
                <div class="panel-body">
                    便签主体
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">便签标题</h3>
                </div>
                <div class="panel-body">
                    便签主体
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">便签标题</h3>
                </div>
                <div class="panel-body">
                    便签主体
                </div>
            </div>
        </div>
    </div>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item">
                <img alt="" src="../img/1.jpg" data-holder-rendered="true">
            </div>
            <div class="item">
                <img alt="" src="../img/2.jpg" data-holder-rendered="true">
            </div>
            <div class="item active">
                <img alt="" src="../img/3.jpg" data-holder-rendered="true">
            </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>


<!-- 1.11.3版本的 jquery.js , bootstrap.min.js 依赖 jquery.js  -->
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {
        $('.btn-primary').click(function () {
            $('.alert').fadeToggle();
        });
    })
</script>
</body>
</html>